<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/context/mytags.jsp" %>
<!doctype html>
<html>
<head>
    <t:base type="jquery,easyui,tools,DatePicker,ckeditor"></t:base>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Expires" content="-1">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <title>选择分类</title>
    <style>
        *{ margin: 0; padding: 0;-webkit-box-sizing: border-box;  -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
        .questionSortSelected{ padding: 8px 15px 2px; font-size: 12px;}
        .questionSortSelected h4{ margin-bottom:15px; font-size: 12px;}
        .questionSortSelected .sort{ display: inline-block; padding: 0 15px; height: 30px; border: 1px solid #DCDCDC; line-height: 28px; margin: 0 6px 6px 0; color: #ff9b50;}
        #questionSortBottom~.mui-content{ padding-bottom: 140px;}
        .questionSortList { padding: 0 10px;}
        .questionSortList .sortGroup{ margin-bottom: 15px;}
        .questionSortList .sortBig{ position: relative; float: left; width: 33.333%;padding: 0 5px;;}
        .questionSortList .sortBig span{display: block; padding: 0 5px; width: 100%; height: 30px;line-height: 28px;  border: 1px solid #DCDCDC;border-radius: 3px; font-size: 14px; color: #787878; text-align: center; background: #FFFFFF; overflow: hidden;}
        .questionSortList .sortBig.active:after{content: ''; position: absolute; left: 5px; right: 5px; top: 29px; z-index: 1; height: 10px; border-left:1px solid #DCDCDC; border-right:1px solid #DCDCDC; background: #FFFFFF;}
        .questionSortList .sortChild{position: relative; float: left; margin-top: 7px;width: 100%; padding: 14px 5px 8px; border: 1px solid #DCDCDC; background: #FFFFFF;}
        .questionSortList .sortChild:before{ content: ''; position: absolute; left: -10px; top:-1px; bottom: -1px; width: 10px; border: 1px solid #DCDCDC; border-right: 0; background: #FFFFFF;}
        .questionSortList .sortChild:after{ content: ''; position: absolute; right:-10px; top:-1px; bottom: -1px; width: 10px; border: 1px solid #DCDCDC;border-left:0;background: #FFFFFF;}
        .questionSortList .sortChild .sort{ display: inline-block; margin:0 3px 6px; padding: 0 15px; height: 30px; line-height: 28px; border-radius: 3px; border: 1px solid #DCDCDC; color: #ff9b50; font-size: 12px;}
        .questionSortList .sortChild .sort.active{ background: #ff9b50; color: #FFFFFF; border-color: #ff9b50;}
        .mui-hidden{ display: none;}
        .mui-clearfix:before, .mui-clearfix:after{display: table;content: ' ';}
        .mui-clearfix:after{clear: both;}
        .mui-col-xs-12{width: 100%;}
        .mui-content-padded{ padding: 10px;}
        .mui-content{ position: relative; font-size: 12px; padding-bottom: 50px;}
        .color-gray-light{ color: #c0c0c0;}
        .mui-bar{ position: fixed; bottom: 0; left: 0; right: 0; min-height: 50px; background: #fff; z-index: 99999;}
    </style>
</head>

<body>
<footer class="mui-bar" id="questionSortBottom">
    <div class="questionSortSelected">
        <h4 class="color-gray-light">已选择 (<span id="selectnum">0</span>/5)</h4>
        <div class="mui-clearfix" id="selectedSort">

        </div>
    </div>
</footer>

<div class="mui-content">
    <div class="mui-content-padded color-gray-light">
        根据问题分类最多选择五个标签，方便擅长的专业咨询师通过标签快速找到并回答您的问题。
    </div>
    <div class="questionSortList" id="sortList">
        <c:forEach items="${aColumnsEntities}" var="c" varStatus="k">
            <c:if test="${(k.index+1)%3==1}">
        <div class="sortGroup mui-clearfix">
            </c:if>
            <div class="sortBig" data-id="${c.columnsId}">
                <span>${c.title}</span>
                <div class="childList mui-hidden">
                    <c:forEach items="${c.aColumnsEntities}" var="child">
                    <span class="sort" data-id='${child.columnsId}'>${child.title}</span>
                    </c:forEach>
                </div>
            </div>
                <c:if test="${(k.index+1)%3==0 || k.last}">
            <div class="sortChild mui-hidden"></div>
                </c:if>
            <c:if test="${(k.index+1)%3==0}">
            </div>
            </c:if>
            <c:if test="${(k.index+1)%3!=0 && k.last }">
            </div>
            </c:if>
        </c:forEach>



    </div>
</div>
<t:formvalid formid="addformobj" dialog="true" usePlugin="password" layout="table"
             action="#" beforeSubmit="f_callback()">

</t:formvalid>
<script>
    $(".questionSortList .sortBig").click(function(){
        var id=this.dataset.id;
        $(this).addClass("active").siblings().removeClass("active");
        $(".sortChild").addClass("mui-hidden");
        var childObj=$(this).siblings('.sortChild');
        $(childObj).html($(this).find(".childList").html());
        $(childObj).removeClass("mui-hidden");

        var ele=$("#selectedSort").find('.sort'),ids='';
        if(ele.length>0){
            for(var i=0;i<ele.length;i++){
                var id=ele[i].getAttribute("data-id");
                ids+=','+id;
            }
        }
        ids+=',';

        var _sort=$(childObj).find(".sort");
        for(var i=0;i<_sort.length;i++){
            var id=_sort[i].getAttribute('data-id');
            if(ids.indexOf(','+id+',')>-1){
                _sort[i].classList.add('active');
            }
        }
    })
    $(".questionSortList .sort").live("click",function(){
        if(this.classList.contains('active'))return false;
        var count=$("#selectedSort").find(".sort").length;
        if(count==5)return;
        $("#selectedSort").append(this.outerHTML);
        this.classList.add('active');
        $("#selectnum").html(++count);
    })

    $("#selectedSort .sort").live("click",function(){
        var sort=this.innerText;
        var sortid=$(this).attr("data-id");

        var ele=$("#sortList").find(".sort");
        var count=$("#selectedSort").find(".sort").length;
        if(ele.length>0){
            for(var i=0,l=ele.length;i<l;i++){
                if(parseInt(ele[i].dataset.id)==sortid)
                {
                    ele[i].classList.remove('active');
                    break;
                }
            }
        }
        this.parentNode.removeChild(this);
        var _sort=$(".questionSortList .sortGroup .sortChild").find(".active");
        for(var i=0;i<_sort.length;i++){
            var id=_sort[i].getAttribute('data-id');
            if(sortid == id){
                _sort[i].classList.remove('active');
            }
        }
        $("#selectnum").html(--count);
    })

    //提交前调用
    function f_callback(){
        var win = frameElement.api.opener; //获取父窗口对象
        var fname=window.name; //frame 名字
        var ids="";
        var tags="";
        $("#selectedSort").find(".sort").each(function(){
            ids+=this.dataset.id+",";
            tags+=this.innerHTML+",";
        });
//        win.classes_callback(fname,ids,tags);
        var upiframename='${upiframename}';
        $("iframe[name="+upiframename+"]", this.parent.parent.document)[0].contentWindow.classes_callback(fname,ids,tags);
        return true;
    }

    //关闭当前窗口
    function f_closeWindow(){
        frameElement.api.close();
    }
</script>
</body>
</html>